<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>汇才创智管理系统</title>
		<link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
		<link rel="stylesheet" type="text/css" href="css/zhu.css" />
	</head>
	<body>
		<div id="left" id="tabemplyee">
		<!-- 左侧边栏 -->		
			<div class="e_tab">
				<ul>					
					<li style="color: #424949; margin-left: -14px;">
						<i class=" fi-home" style="margin-right: 8px;"></i>主页</li>
					<li v-for="(tab, index) in tabs" :class="{'active':selected===index}" @click="choose(index)">
						{{tab.tabNam}}&nbsp{{tab.tabName}}
						<span style="float: right;color: #7F8C8D; margin-right: 20px;">❀</span>
					</li>
				</ul>
			</div>
			<!-- 右边 -->
			<div id="right">
				<!-- 顶部 -->
				<div id="top">
					<div class="so">
						<input type="text" placeholder="输入搜索内容" /><i class=" span fi-magnifying-glass"></i>
					</div>
				</div>
				<!-- 主体 -->
				<div id="content">
					<h3>{{tabName}}</h3>
				</div>
			</div>
		</div>
		<script type="text/javascript" src='js/vue.js'></script>
		<script>
			var app = new Vue({
				el: '#left',
				data: {						
					tabName:"",
					selected:"",					
					tabs: [{
							id: 0,
							tabName: '规则',
							tabNam: '▤'
						},
						{
							id: 1,
							tabName: '内容',
							tabNam: '▦'
						},
						{
							id: 2,
							tabName: '用户',
							tabNam: '♜'
						},
						{
							id: 3,
							tabName: '实训',
							tabNam: '▣'
						},
						{
							id: 4,
							tabName: '功能',
							tabNam: '▩'
						},
						{
							id: 5,
							tabName: '系统',
							tabNam: '❋'
						},
						{
							id: 6,
							tabName: '安全',
							tabNam: '☠'
						}
					]
				},
				methods: {
					choose(index) {
						window.console.log(index)
						this.selected = index;
						if (this.tabs[index].id == 0) {
							this.tabName = '规则'
						}
						if (this.tabs[index].id == 1) {
							this.tabName = '内容'
						}
						if (this.tabs[index].id == 2) {
							this.tabName = '用户'
						}
						if (this.tabs[index].id == 3) {
							this.tabName = '实训'
						}
						if (this.tabs[index].id == 4) {
							this.tabName = '功能'
						}
						if (this.tabs[index].id == 5) {
							this.tabName = '系统'
						}
						if (this.tabs[index].id == 6) {
							this.tabName = '安全'
						}
					}
				},
				created:function(){
					this.tabName="汇才创智管理系统"
				}
			})
		</script>
	</body>
</html>
